<script setup lang="ts">
import {onMounted} from "vue";
import useDetailStore from "@/store/modules/hospitalDetail.ts";
let detailStore = useDetailStore();
import {
  Document,
  Menu as IconMenu,
  InfoFilled,
    Search,
    HomeFilled,
  Setting,
} from '@element-plus/icons-vue'
import {useRouter,useRoute} from "vue-router";
let $router = useRouter();
let $route = useRoute();
const changeActive = (path:string)=>{
  $router.push({path,query:{hoscode:$route.query.hoscode}});
}
//组件挂载完毕：通知pinia仓库发请求获取医院详情的数据，存储仓库中
onMounted(()=>{
  //获取医院详情的数据
  detailStore.getHospital($route.query.hoscode as string);
  //获取某一个医院科室的数据
  detailStore.getDepartment($route.query.hoscode as string);
})
</script>

<template>
<div class="hospital" >
<!-- 左侧导航区域 -->
  <div class="menu">
    <div class="top">
    <el-icon><HomeFilled/></el-icon>
      <span> / 医院信息</span>
    </div>
    <el-menu
        class="el-menu-vertical-demo"
        :default-active="$route.path"
    >
      <el-menu-item index="/hospital/register" @click="changeActive('/hospital/register')">
        <el-icon><icon-menu /></el-icon>
        <span>预约挂号</span>
      </el-menu-item>
      <el-menu-item index="/hospital/detail"  @click="changeActive('/hospital/detail')">
        <el-icon><document /></el-icon>
        <span>医院详情</span>
      </el-menu-item>
      <el-menu-item index="/hospital/notice"  @click="changeActive('/hospital/notice')">
        <el-icon><setting /></el-icon>
        <span>预约须知</span>
      </el-menu-item>
      <el-menu-item index="/hospital/close" @click="changeActive('/hospital/close')">
        <el-icon><InfoFilled /></el-icon>
        <span>停诊信息</span>
      </el-menu-item>
      <el-menu-item index="/hospital/search" @click="changeActive('/hospital/search')">
        <el-icon><Search /></el-icon>
        <span>查询与取消</span>
      </el-menu-item>
    </el-menu>
  </div>
<!-- 右侧内容展示区域：路由组件展示位置 -->
  <div class="content">
    <router-view></router-view>
  </div>
</div>
</template>

<style scoped lang="scss">
.hospital{
  display: flex;
  .menu{
    flex: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    .top{
      color: #7f7f7f;
    }
  }
  .content{
    flex: 8;
  }
}
</style>
